<template>
    <div class="home_search">
        <el-autocomplete @select="goDetail" :fetch-suggestions="fetchDate" v-model="hostname"
            class="home_search-autocomplete" clearable placeholder="请你输入医院的名称" :trigger-on-focus="false" />
        <el-button class="home_search-button" type="primary" size="default" :icon="Search"></el-button>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { reqHospitalInfo } from '@/api/home';
import type { HospitalInfo } from '@/api/home/type';
// 收集搜索的关键字(医院的名字)
let hostname = ref<string>('')
// 创建路由器对象
let $router = useRouter()
// 顶部组件的回调
const fetchDate = async (keyWord: string, cb: any) => {
    // 当用户输入完关键字函数会执行一次，发请求获取需要展示的数据即可
    let { code, data }: HospitalInfo = await reqHospitalInfo(keyWord)
    if (code === 200) {
        let showData = data.map(item => {
            return {
                value: item.hosname, // 展示的医院的名字
                hoscode: item.hoscode // 存储医院的编码
            }
        })
        cb(showData)
    }

}
// 点击某一个推荐项
const goDetail = (item: any) => {

    // 点击跳转进入医院详情页
    $router.push({
        path: '/hospital/register',
        query: { hoscode: item.hoscode }
    })
}
</script>
<style scoped lang="scss">
.home_search {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.home_search-autocomplete) {
        width: 60%;
        margin-right: 4px;
        display: flex;
        align-items: center;

        input {
            height: 40px;
        }
    }

    .home_search-button {
        width: 60px;
        height: 42px;
    }
}

@media (max-width:768px) {
    .home_search {
        height: 70px;

        :deep(.home_search-autocomplete) {
            width: 100% !important;

            input {
                height: 30px !important;
            }
        }

        .home_search-button {
            height: 32px !important;
        }
    }
}
</style>